<template>
  <el-dialog
    :title="isAdd ? '添加菜单' : '编辑菜单'"
    :visible.sync="isShow"
    center
    :before-close="cancel"
  >
    <el-form :model="roleInfo" :rules="rules" ref="form">
      <el-form-item label="角色名称" label-width="120px" prop="rolename">
        <el-input v-model="roleInfo.rolename"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" label-width="120px">
        <!-- 树形控件 -->
        <el-tree
          :data="get_menuList"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="{children:'children','label':'title'}"
          ref='tree'
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="roleInfo.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>
<!-- 
1.树形控件
2.树形控件的数据来自menuList数据(从仓库中获取数据)
3.后端要去menus字段必须死活一个字符串格式的数据
  getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），
  则返回目前被选中的节点的 key 所组成的数组


4.bug
问题1：
  如果从菜单管理进入角色管理，可以获取到树形控件的数据
  如果直接进入角色管理，获取不到树形控件的数据
原因：树形控件用的是菜单管理的数据，如果没有加载菜单管理则没有请求数据，所以就没有数据
解决：自己在角色管理页面再获取一次数据

 -->
<script>
import { roleadd,roleinfo,roleedit } from "@/request/api.js";
import {mapGetters,mapActions} from "vuex"
export default {
  //接收来自父组件的数据
  props: ["isShow", "isAdd"],
  data() {
    return {
      data: [],
      //定义表单数据
      roleInfo: {
        rolename: "", //角色名称string
        menus: "", //角色权限 id数组（选填）'2,3,4' 字符串
        status: 1, //状态1正常2禁用
      },
      //定义表单验证规则
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  //方法
  methods: {
    ...mapActions({
      action_menuList:"menu/action_menuList",
      action_roleList:"role/action_roleList"
    }),
    //1.点击取消按钮，关闭弹框
    cancel() {
      //a.通知父组件修改数据-关闭弹框 isShow修改父组件的数据  子传父
      this.$emit("cancel");
      //b.重置
      this.reset()
    },

    //2.重置
    reset(){
      //a.清空输入框内容
      this.roleInfo = {
        rolename: "", //角色名称string
        menus: "", //角色权限 id数组（选填）'2,3,4' 字符串
        status: 1, //状态1正常2禁用
      };

      //b.清除验证提示
      this.$refs.form.resetFields();

      //c.清空树形控件的选中
      this.$refs.tree.setCheckedKeys([]);
    },

    //2.点击确定按钮
    sure() {
      //a.表单验证，通过了才能往下执行
      this.$refs.form.validate(async (val) => {
        //b.没有通过验证,不做任何处理
        if (!val) {
          return;
        }

        //c.添加/编辑
        if (this.isAdd) {

          // console.log(this.$refs.tree.getCheckedKeys()) //[52, 54, 55, 53]
          // this.$refs.tree.getCheckedKeys().join(","); //'52, 54, 55, 53'
          this.roleInfo.menus = this.$refs.tree.getCheckedKeys().join(",")
          try {
            let res = await roleadd(this.roleInfo);
            if (res.code == 200) {
              //添加成功，提示用户
              this.$message.success(res.msg);

              //关闭弹框
              this.cancel();

              //更新页面
              this.action_roleList();
            } else {
              this.$message.warning(res.msg);
            }
          } catch (error) {
            this.$message.error(error);
          }
        } else {
          this.roleInfo.menus = this.$refs.tree.getCheckedKeys().join(",")
          try {
            let res = await roleedit(this.roleInfo);
            if (res.code == 200) {
              //添加成功，提示用户
              this.$message.success(res.msg);
              //关闭弹框
              this.cancel();
              //更新页面
              this.action_roleList();
            } else {
              this.$message.warning(res.msg);
            }
          } catch (error) {
            this.$message.error(error);
          }
        }
      });

      // //a.关闭弹框
      // this.cancel();

      // //b.添加/编辑
      // if(this.isAdd){
      //     console.log("添加")
      // }else{
      //     console.log("编辑")
      // }
    },

    //3.数据回显
    async lookup(id){
      try{
         //请求对应的那一条数据
        let res = await roleinfo({id});
        if(res.code == 200){
          //数据回显
          this.roleInfo = res.list;
          //处理树形控件的数据
          this.$refs.tree.setCheckedKeys(this.roleInfo.menus.split(","));
          //添加一个id字段
          this.roleInfo.id = id;
        }else{
          this.$message.warning(res.msg)
        }
      }catch(error){
        this.$message.error(error)
      }
    }
  },
  computed:{
    ...mapGetters({
      get_menuList:"menu/get_menuList"
    })
  },
  //页面挂载完成
  mounted(){
    //如果没有数据，要自己获取一遍数据
    if(this.get_menuList.length == 0){
      this.action_menuList();
    }
  }
};
</script>

<style>
</style>